<template>
  <!-- gap-5 m-0 -->
  <div
    class="row q-gutter-x-sm q-pa-sm bg-primary ml-0px pt-20px pr-15px"
    :class="$q.platform.is.android ? 'h-100px flex flex-items-start' : ''"
  >
    <div class="col">
      <q-input
        dense
        v-model="addEntryForm.name"
        ref="nameRef"
        outlined
        v-select-all
        :bg-color="useLightOrDark('white', 'black')"
        placeholder="名称"
      />
    </div>
    <div class="col">
      <q-input
        dense
        input-class="text-right"
        v-model.number="addEntryForm.amount"
        type="number"
        step="0.01"
        outlined
        v-select-all
        :bg-color="useLightOrDark('white', 'black')"
        placeholder="金额💰"
        @keyup.enter="handleAddEntry"
      />
    </div>
    <div class="col col-auto">
      <q-btn
        class="shadow-2"
        text-color="white"
        :color="useLightOrDark('primary', 'bg-primary')"
        round
        icon="add"
        @click="handleAddEntry"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useEntriesStore } from "src/stores/storeEntries";
import type { entriesProps } from "stores/storeEntries/typing";
import { useLightOrDark } from "src/hooks/useCurrencify";
import vSelectAll from "src/directives/directiveSelectAll";
import { useQuasar } from "quasar";

defineOptions({
  name: "AddEntry",
});

const $q = useQuasar();
const entriesStore = useEntriesStore();

// nameRef 用于聚焦输入框
const nameRef = ref<HTMLElement | null>(null);
// 默认常量表单
const addEntryFormDefault = {
  id: "",
  name: "",
  amount: null,
  paid: false,
};
const addEntryForm = ref<entriesProps>({
  ...addEntryFormDefault,
});

// 重置表单
const resetAddEntryForm = () => {
  Object.assign(addEntryForm.value, addEntryFormDefault);
  if (nameRef.value) {
    nameRef.value.focus();
  }
};

// 添加提交回调
const handleAddEntry = () => {
  const { name, amount } = addEntryForm.value;
  if (name == "") {
    $q.notify({
      message: "名称不能为空",
      actions: [{ icon: "close", color: "white" }],
    });
  } else if (amount == null) {
    $q.notify({
      message: "金额不能为空",
      actions: [{ icon: "close", color: "white" }],
    });
  } else {
    entriesStore.addEntrie(addEntryForm.value);
    resetAddEntryForm();
  }
};
</script>

<style lang="css">
/* .q-field__messages {
  color: white;
} */
</style>
